| 用CSS | 您所在的位置：网站首页 › html li靠右 › 用CSS |
用CSS
|
摘要：最简单的列表页是表格，其实使用DIV+CSS布局更简单，也更灵活，本文给出一个布局的小例子，读者可以根据需要在实际项目中调整。 1. 先来看下效果 分行展示 列表页内容需要居中，两侧需要留白。 隔行需要有线条隔开，视觉更容易对齐每行的标题与操作。 标题靠左，操作靠右使用Margin左右留出百分之十的空白 margin: 0 10%; 复制代码 2.3 隔行需要有线条隔开，视觉更容易对齐每行的标题与操作使用边框渲染每个列表行的分割线 border-bottom: 1px solid #eee; 复制代码 2.4 标题靠左，操作靠右使用DIV的float让操作区漂移到右边 float: right; 复制代码 2.5 使用Bootstrap调整列表的上下间距用到的bootstrapCSS解释，py-3 ，p代表padding内边距，y取义为坐标xy轴代表垂直的意思。py-3就是：垂直方向内边距3等大小，py-4就是4等，依次类推。 bootstrap的作用是把常用的CSS根据使用场景的效果起名（比如大边距，小边距，警示颜色等等），你只关心想要什么效果，而不用去考虑不同配色的语义与字号边距大小的细节。 如下是py-3的bootstrap源码，自己写也是一样的（个人非常喜欢bootstrap的命名，非常简洁，但背后都有含义）。 .py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; } 复制代码 3.全部源码可以建立一个html文件，拷贝进去，使用浏览器打开就可以看到效果。 #mainDiv { /*左右留出百分之十的空白*/ margin: 0 10%; /*内边距根据自己喜好设置，如果整体有边框，比较有用*/ padding: 2% 2% 2% 2%; /*子Div使用Float后会撑开父Div*/ overflow: hidden; } /*渲染每个列表行的分割线，底部画条线，不要样式*/ .repo-list-item { border-bottom: 1px solid #eee; list-style: none; position: relative; } /*操作链接区域，漂浮到右边，字体用灰色弱化视觉效果，字号小一些，弱化自己，突出标题*/ .entry-header { font-family: "Palatino Linotype", "Book Antiqua", Palatino, Helvetica, STKaiti, SimSun, serif; color: #a8a8a7; font-size: 0.8em; font-style: italic; float: right; } /*操作链接字体等同设置，覆盖链接设置，强制弱化*/ .entry-header a { font-family: "Palatino Linotype", "Book Antiqua", Palatino, Helvetica, STKaiti, SimSun, serif; color: #6a737d; margin: 0 2px; } 编辑 组织 (2021年11月08日) 标题标题标题标题标题标题标题标题标题标题1 编辑 组织 (2021年11月08日) 标题标题标题标题标题标题标题标题标题标题1 编辑 组织 (2021年11月08日) 标题标题标题标题标题标题标题标题标题标题1 复制代码 |
【本文地址】
公司简介
联系我们